<body>
	<script language="Javascript">
		var SPAN_PROGRESS_BAR = "prgrs";
		var SPAN_LINKS= "lnk";
		var CHAT_CONTENT= "chatContent";
	
		function appendContent( value ){
			document.getElementById("chatContent").innerHTML += value;  
		}
		
		function changeContent( value, holderID){
			document.getElementById(holderID).innerHTML = value;  
		}

		function addImage( imgSrc ){  
			var imgTag = "<img  src=\"" + imgSrc + "\" />";
			appendContent(imgTag);  
		}

		function addProgressBar(barID, holderID){
			var progressBar = "";
			progressBar += '<br><br><div id=\" + SPAN_PROGRESS_BAR + barID + ""\">';
			progressBar += '<table align=\"left\" style=\"font-size:8pt;padding:0px;border:solid grey 1px;\" cellpadding=\"0\" cellspacing=\"0\"><tr><td>';
			for(index=1;index<=100;index=index+1){
				progressBar += '<span id=\"progress' 
							+ barID + index 
							+ '\">&nbsp;</span>';
			}
			progressBar += ('<span id=\"percent' + barID + '\">&nbsp;0%</span></td></tr></table>');
			progressBar += '</div>';
			document.getElementById(holderID).innerHTML += progressBar;
		}
		
		function updateProgressBar(barID,per){
			var block = per % 101;
			for(index=1;index<=block;index=index+1){
				document.getElementById('progress'+ barID + index).style.backgroundColor = 'blue';
			}

			for(index=(block + 1) ;index<=100;index=index+1){
				document.getElementById('progress'+ barID + index).style.backgroundColor = 'white';
			}
			
			document.getElementById('percent' + barID).innerHTML = ('&nbsp;' + block + '%');
		}

	</script>
	<font size="2" face="Arial">
	<div id='chatContent'>
	</div>
	</font>
</body>